<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <canvas id="canvas" width="100" height="100"></canvas>
  <script>
    /**
     * @param:value 当前值
     * @param:sum   总数
     * @param:text  文本值
     **/
    function draw(value, sum, text) {
      if(typeof value !=="number"){
        throw "当前值必须是一个数字"
      }
      if(typeof sum !=="number"){
        throw "总数必须是一个数字"
      }
      if(value>sum){
        throw "当前值不能大于总数"
      }
      const radian = (value / sum) * 360;
      const canvas = document.querySelector("#canvas");
      const context = canvas.getContext("2d");
      // 文本所占宽度
      const textWidth = context.measureText(text).width;
      // 线条宽度
      const lineWidth = 2;
      // 字体大小
      const fontSize = 14;
      // 圆半径
      const R = canvas.width / 2;
      // 线条颜色
      const colors = {
        default: "gray",
        progress: "blue",
        finish: "green"
      }
      // 清空
      context.clearRect(0, 0, canvas.width, canvas.height);

      // 圆环
      context.beginPath();
      context.strokeStyle = value === sum ? colors.finish : colors.default;
      context.lineWidth = lineWidth;
      context.arc(R, R, R-lineWidth, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
      context.stroke();
      context.closePath();
      context.font = `${fontSize}px sans-serif`;

      // 文本
      context.fillText(text, R - (textWidth / 2), R + (fontSize / 4));

      // 圆弧
      if (value !== sum) {
        context.beginPath();
        context.strokeStyle = colors.progress;
        context.lineWidth = lineWidth;
        context.arc(R, R, R-lineWidth, -(Math.PI / 180) * 90, (Math.PI / 180) * (radian - 90), false);
        context.stroke();
        context.closePath();
      }
    }


    draw(1,3,'测试')
  </script>
</body>

</html>